<template>
	<div class="saying">
		<h2>我是Saying组件</h2>
		<h4>学校的校龄：{{school.age}}</h4>
		<button @click="addSaying">添加一个语录</button>
		<ul>
			<li v-for="saying in sayingList" :key="saying.id">{{saying.title}}</li>
		</ul>
	</div>
</template>

<script>
	import {mapState} from 'vuex'

	export default {
		name:'Saying',
		computed:{
			...mapState(['sayingList','school'])
		},
		methods: {
			addSaying(){
				this.$store.dispatch('addSaying')
			}
		},
	}
</script>

<style scoped>
	.saying{
		background-color: orange;
		padding: 20px;
	}
</style>